<template>
	<view class="container">
		<nav-bar :title="$t('兌換記錄')" leftIcon="left"></nav-bar>
		<!-- v-for="(item,i) in list" :key="i" -->
		<view class="typeList">
			<view :class="index == key + 1 ? 'moneyNameKk' : 'moneyNameKk2'" v-for="(item, key) in typeList" :key="key"
				@click="handleType(key + 1)" style="color: #fff;">
				{{ item.typeName }}
			</view>
		</view>
		<view class="" style="margin-top: 120rpx;">
			<view class="listMain" v-for="(item, i) in list" :key="i">
				<view class="leftList">
					<view class="text">
						<span style="color: #808492;">{{ $t('交易編號') }}：</span>{{ item.transactionId }}
					</view>
					<view class="text" v-if="index == 1" style="padding: 15rpx 0;">
						<span style="color: #808492;">CFP{{ $t('數量') }}:<span style="color: #fff;">
								{{ item.cfpNumber }}</span>
							{{ $t('兌換') }}USDT{{ $t('數量') }}：</span>{{ item.exchangeUsdt }}
					</view>
					<view class="text" v-if="index == 2" style="padding: 15rpx 0;">
						<span style="color: #808492;">USDT{{ $t('數量') }}:<span style="color: #fff;">
								{{ item.usdtNumber }}</span>
							{{ $t('兌換') }}CFP{{ $t('數量') }}：</span>{{ item.exchangeCfp }}
					</view>
					<view class="text" v-if="index == 1">
						<span style="color: #808492;">{{ $t('CFP結餘') }}：</span>{{ item.cfpBalance }}
					</view>
					<view class="text" v-if="index == 2">
						<span style="color: #808492;">{{ $t('USDT結餘') }}：</span>{{ item.usdtBalance }}
					</view>
					<view class="time">
						{{ $t('時間') }}：{{ item.timestamp }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from "vue";
import msgListData from '@/hooks/msgList.js'
import i18n from '@/locale/index'
import {
	onShow,
	onReachBottom
} from '@dcloudio/uni-app'
const {
	sumComputed,
	getXxList
} = msgListData()

const page = ref({
	pageNum: 1,
	pageSize: 10,
})
const index = ref(1)
const typeList = ref([
	{
		index: 1,
		typeName: 'CFP to USDT'
	}, {
		index: 2,
		typeName: 'USDT to CFP'
	}
])
//列表字段
const list = ref([])
const handleType = (e) => {
	list.value = []
	page.value.pageNum = 1
	index.value = e == 2 ? index.value = 2 : index.value = 1
	getRechargeRecordList()
}
async function getRechargeRecordList() {
	const res = await getXxList('usdtInfo/getConvertRecords', {
		userId: uni.getStorageSync('setUserInfo').userId,
		pageNum: page.value.pageNum,
		pageSize: page.value.pageSize,
		exchangeType: index.value,
		// languageType:uni.getStorageSync('lang') == 'en'?'en':'zh',
	})

	if (!res.records.length) {
		return uni.showToast({
			title: `${i18n.global.t('没有更多了')}!`,
			icon: 'none',
		})
	} else {
		list.value = [...list.value, ...res.records]
	}

}
onShow(async () => {
	// getRechargeRecordList()
	handleType()
})

//上拉加载更多
onReachBottom(() => {
	page.value.pageNum++
	getRechargeRecordList()

})
</script>

<style lang="scss" scoped>
.moneyNameKk2 {
	width: 280rpx;
	height: 60rpx;
	background: #b3b3b3;
	border-radius: 10rpx;
	text-align: center;
	line-height: 60rpx;
	margin-right: 25rpx;
}

.moneyNameKk {
	width: 280rpx;
	height: 60rpx;
	background: linear-gradient(90deg, #039BDA, #0DF2ED);
	border-radius: 10rpx;
	text-align: center;
	line-height: 60rpx;
	margin-right: 25rpx;
}

.typeList {
	display: flex;
	align-items: center;
	padding: 35rpx;
	position: fixed;
	top: 150rpx;
	background-color: rgb(24, 23, 30);
	width: 100%;
}

.listMainLine {
	padding: 25rpx 45rpx;
	background: #24232C;
	// border-radius: 20rpx;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border: 1rpx solid #4b4b4b;
	margin-bottom: 15rpx;

}

.text {
	color: #FFFFFF;
	font-size: 28rpx;
	word-break: break-all;
	white-space: normal;
	width: 690rpx;
}

.time {
	color: #808492;
	font-size: 24rpx;
	margin-top: 22rpx;
}

.listMain {
	padding: 25rpx 45rpx;
	background: #24232C;
	// border-radius: 20rpx;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	// border-bottom: 1rpx solid #4b4b4b;
	margin-bottom: 15rpx;

}
</style>